<template>
  <div class="add">
    <div class="top" @click="Cilckbox">&lt;</div>
    <div class="middle">
      <input type="text" placeholder="请输入任务名称" v-model="name" />
      <input type="button" value="新增" @click="newadd" />
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "../../stores";
import { useRouter } from "vue-router";
import { ref } from "vue";

let name = ref("");
let $router = useRouter();
let $store = useCounterStore();

let Cilckbox = () => {
  $router.go(-1);
};
let newadd = () => {
  $router.go(-1);
  $store.add(name);
};
</script>

<style scoped>
.add .top {
  font-size: 20px;
  font-weight: 700;
}
.add .middle input {
  width: 380px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
  outline: none;
  border: none;
  border-radius: 10px;
  background-color: rgb(229, 226, 226);
}
.add .middle input:last-child {
  line-height: 40px;
  color: lightgreen;
  background-color: white;
  border: 1px solid lightgreen;
  text-align: center;
}
</style>